<script>
import { defineComponent, reactive, computed } from 'vue'
export default defineComponent({
  props: {
    isButton: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    let dict = ['orange', 'white', 'yellow', 'green', 'blue', 'gray']

    let styles = reactive({ data: [] })

    dict.map((x) => {
      styles.data[x] = context.attrs.type == x
    })

    let isButton = computed(() => {
      return props.isButton
    })
    // eslint-disable-next-line vue/no-dupe-keys
    return { props, context, styles, dict, isButton }
  },
  render() {
    this.dict.map((x) => {
      this.styles.data[x] = this.context.attrs.type == x
    })

    return (
      <span
        class={{ block: true, ...this.styles.data, isButton: this.isButton }}
      >
        {this.context.slots.default()}
      </span>
    )
  },
})
</script>

<style scoped>
.block {
  padding: 3px;
  border-radius: 3px;
}
.orange {
  background-color: #ff5722;
  color: #fff;
}
.white {
  background-color: #fff;
  color: #666666;
}
.yellow {
  background-color: rgb(255 184 0);
  color: #fff;
}
.green {
  background-color: rgb(0, 150, 136);
  color: #fff;
}
.blue {
  background-color: rgb(30, 159, 255);
  color: #fff;
}
.gray {
  background-color: rgb(57, 61, 73);
  color: #fff;
}
.isButton {
  cursor: pointer;
}
</style>
